<template>
  <div class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
<!--        <el-input v-model="searchText" placeholder="输入关键字" style="width:300px;marginRight:20px"></el-input>-->
        <el-autocomplete
          class="inline-input"
          style="width:300px;marginRight:20px"
          v-model="searchText"
          :fetch-suggestions="querySearch"
          placeholder="输入关键字"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
        <!-- <el-select v-model="authStatusOption"  clearable placeholder="认证状态" style="margin:0 20px;">
            <el-option
            v-for="item in authStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select> -->
        <el-select v-model="searchLevel"  clearable placeholder="级别" style="margin:0 20px;">
          <el-option
            v-for="item in searchLevelList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="searchSort"  clearable placeholder="分类" style="margin:0 20px;">
          <el-option
            v-for="item in searchSortList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <el-button type="primary" size="medium" @click="toVipCompanyEditor('')" v-if="is_admin==1">添加</el-button>
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      v-loading="tableLoadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">
      <el-table-column
        label="logo"
        width="100">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.logo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="单位名称"
        show-overflow-tooltip
        width="180">
        <template slot-scope="scope">

          <div @click.stop="showConsultation(scope.row.id)" style="cursor:pointer;color:#409EFF">{{scope.row.name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="单位地址"
        width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div style="whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;">
            {{scope.row.province}}{{scope.row.city}}{{scope.row.area}}{{scope.row.address}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="营业执照"
        width="180">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click.stop="showLicense(scope.row)">查看</el-button>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="员工表" width='100' v-if="is_admin!=1">
        <template slot-scope="scope">
          <el-button v-if="is_admin!=1" size="mini" type='primary' @click="toStaff(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="员工审核" width='100' v-if="is_admin!=1">
        <template slot-scope="scope">
          <el-button v-if="is_admin!=1" size="mini" type='primary' @click="toStaffExamine(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="发票记录" width='100' v-if="is_admin!=1">
        <template slot-scope="scope">
          <el-button v-if="is_admin!=1" size="mini" type='primary' @click="toReceipt(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="企业信息" width='100' v-if="is_admin!=1">
        <template slot-scope="scope">
          <el-button v-if="is_admin!=1" size="mini" type='primary' @click="toVipCompanyEditor(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="updated_at"
        label="创建时间"
        show-overflow-tooltip
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="vip_package_name"
        label="绑定付费套餐"
        show-overflow-tooltip
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column label="编辑" width='100' v-if="is_admin==1">
        <template slot-scope="scope">
          <el-button size="mini" type='primary' @click="toVipCompanyEditor(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='150' v-if="is_admin==1">
        <template slot-scope="scope">
          <el-select v-model='scope.row.operation' style='width: 120px' placeholder="请选择操作">
            <el-option value='管理评论' v-if="is_admin==1">
              <el-button style="width:100%" size="medium" type='text'
                         @click="toVipCompanyComment(scope.row.id)">官方点评
              </el-button>
            </el-option>
            <el-option value='员工表'>
              <el-button style="width:100%" type='text' @click="toStaff(scope.row.id)">员工表</el-button>
            </el-option>
            <el-option value='员工审核'>
              <el-button style="width:100%" type='text' @click="toStaffExamine(scope.row.id)">员工审核</el-button>
            </el-option>
            <el-option value='设置管理员' v-if="is_admin==1">
              <el-button style="width:100%" size="medium" type='text' @click="setAdmin(scope.row.id)">设置管理员
              </el-button>
            </el-option>
            <el-option value='绑定套餐' v-if="is_admin==1">
              <el-button style="width:100%" type='text' @click="showMenu_band(scope.row.id,scope.row.vip_package_name)">
                绑定套餐
              </el-button>
            </el-option>
            <el-option value='发票记录'>
              <el-button style="width:100%" type='text' @click="toReceipt(scope.row.id)">
                发票记录
              </el-button>
            </el-option>
            <el-option value='删除' v-if="is_admin==1">
              <el-button style="width:100%" type='text' @click="deletCompany(scope.row.id,true)">删除</el-button>
            </el-option>
          </el-select>
        </template>
      </el-table-column>


    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->


    <!-- 单位详情 -->
    <el-dialog title="单位详情" :visible.sync="consultationVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <el-form-item label="logo">
          <div><img :src="cousultationDetail.logo_url" alt=""
                    style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
        </el-form-item>
        <el-form-item label="单位名称">
          <div>{{cousultationDetail.name}}</div>
        </el-form-item>
        <el-form-item label="联系方式">
          <div>{{cousultationDetail.contact_number}}</div>
        </el-form-item>
        <el-form-item label="单位地址">
          <div>
            {{cousultationDetail.province}}{{cousultationDetail.city}}{{cousultationDetail.area}}{{cousultationDetail.address}}
          </div>
        </el-form-item>

        <el-form-item label="业务范围">
          <div class="tag-wrapper">
            <span v-for="(item,index) of cousultationDetail.unit_business_label" :key="index">{{item}}</span>
          </div>
        </el-form-item>
        <el-form-item label="单位简介">
          <div class="rich-text" v-html="cousultationDetail.introduction"></div>
        </el-form-item>
        <!-- <el-form-item label="法定代表人" >
            <div>{{cousultationDetail.legal_person_name}}</div>
        </el-form-item> -->
        <el-form-item label="营业执照">
          <div>
            <el-image
              style="width: 200px; height: 200px"
              :fit="'contain'"
              :src="cousultationDetail.license_img_url"
              :preview-src-list="[cousultationDetail.license_img_url]">
            </el-image>

          </div>
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <div>{{cousultationDetail.uniform_social_credit_code}}</div>
        </el-form-item>
        <el-form-item label="创建时间">
          <div>{{cousultationDetail.created_at}}</div>
        </el-form-item>
        <el-form-item label="单位级别">
          <div>{{cousultationDetail.unit_grade_name}}</div>
        </el-form-item>
        <el-form-item label="单位分类">
          <div>{{cousultationDetail.classify_name}}</div>
        </el-form-item>
        <el-form-item label="链接">
          <el-button type="primary"
                     v-clipboard:copy="cousultationDetail.unit_url"
                     v-clipboard:success="onCopy"
                     size="mini"
                     v-clipboard:error="onError">复制链接
          </el-button>
        </el-form-item>


      </el-form>
    </el-dialog>
    <!-- 单位详情end -->

    <!-- 营业执照 -->
    <el-dialog title="营业执照" :visible.sync="licenseVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <div align="center"><img :src="licneseUrl" alt="" style="max-width:400px;margin:0 auto"></div>
      </el-form>
    </el-dialog>
    <!-- 营业执照end -->

    <!-- 绑定套餐弹窗 -->
    <el-dialog title="绑定套餐" :visible.sync="menuBandVisible" @close="initData">
      <div>已绑定套餐</div>
      <el-select v-model="bindMenuOption" clearable placeholder="请选择" style="margin:20px 0">
        <el-option
          v-for="item in bindMenuOptions"
          :key="item.name"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <div>套餐数量</div>
      <el-input-number v-model="MenuOptionNum" :min="1" label="套餐数量" style="margin: 20px 0"></el-input-number>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindMenu">发布</el-button>
      </div>
    </el-dialog>
    <!-- 绑定套餐弹窗end -->
  </div>
</template>
<script>
  export default {
    name: 'member',
    data() {
      return {
        consultationVisible: false,//查看单位详情状态
        goodAtVisible: false,
        licenseVisible: false,

        searchText: '',
        searchLevel: '',
        searchSort:'',
        userAuthId: '',//选中的用户id

        searchLevelList: [],
        searchSortList: [],

        consumtationOption: '',//头部筛选的资讯类型
        consumtationOptions: [
          {label: '全部', value: 0},
          {label: '政策资讯', value: 1},
          {label: '内部资讯', value: 2}

        ],
        restaurants:[],
        authStatusOption: '',//头部筛选是否包好官方点评
        authStatusOptions: [
          {label: '全部', value: 0},
          {label: '是', value: 1},
          {label: '否', value: 2}
        ],
        cousultationDetail: {},
        licneseUrl: '',

        unitId: '',
        menuBandVisible: false,//绑定套餐
        bindMenuOption: '',//绑定套餐ID
        bindMenuOptions: [],
        MenuOptionNum: 0,//套餐数量

        tableData: [{}],
        page: 1,
        totalPage: 0,
        is_admin: window.localStorage.getItem('is_admin'),
        tableLoadingShow: false
      }
    },
    watch: {},
    methods: {

      async bindMenu() {
        let params = {
          unit_id: this.unitId,
          vip_package_id: this.bindMenuOption,
          num: this.MenuOptionNum
        }
        const res = await this.$api.vipPackageBindUnit(params);
        if (res.data.level == 'success') {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.menuBandVisible = false;
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      },
      async getVipPackageList() {
        const res = await this.$api.getVipPackageList();
        if (res.data.level == 'success') {
          this.bindMenuOptions = res.data.data
        }
      },
      showMenu_band(id, name) {
        //显示绑定弹窗
        this.unitId = id;
        for (let i = 0; i < this.bindMenuOptions.length; i++) {
          if (this.bindMenuOptions[i].name == name) {
            this.bindMenuOption = this.bindMenuOptions[i].id;
          }
        }
        this.menuBandVisible = true;
      },

      onCopy(e) {
        this.$message({
          type: 'success',
          message: '复制成功'
        })
      },
      onError(erro) {
        this.$message({
          type: 'error',
          message: '复制失败'
        })
      },
      search() {
        this.tableLoadingShow = true;
        this.page = 1;
        this.getUnitList()
      },
      querySearch(queryString, cb) {
        console.log(queryString)
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };

      },
      handleSelect(item){
        console.log(item);
      },
      async tipList() {
        //获取会员列表
        let params = {
          page: 1,
          limit: 9999,
          is_member_unit: 1,
        }
        let res = await this.$api.getUnitList(params);
        if (res.data.level == 'success') {
          let data = res.data.data;
          data.forEach(item=>{
            let str = {
              value: item.name
            }
            this.restaurants.push(str);
          })
          console.log(this.restaurants)
        }
      },
      async getUnitList() {
        //获取会员列表
        let params = {
          page: this.page,
          limit: 16,
          keyword: this.searchText,
          is_member_unit: 1,
          classify_id: this.searchSort,
          unit_grade_id: this.searchLevel
        }
        let res = await this.$api.getUnitList(params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
        this.tableLoadingShow = false;
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getUnitList();
      },
      async deletCompany(id) {
        //删除
        let judge = null;
        let tit = '删除该会员单位?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delMemberUnit(id)
        }
        console.log(judge)
      },
      async delMemberUnit(id) {
        let res = await this.$api.delMemberUnit({id: id});
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getUnitList()
        } else {
          this.$message.error(res.data.message);
        }
      },
      showLicense(scope) {
        //显示营业执照
        this.licneseUrl = scope.license_img_url
        this.licenseVisible = true;
      },
      async showConsultation(id) {
        //显示详情
        let res = await this.$api.getUnitDetail({id: id});
        if (res.data.level == 'success') {
          this.cousultationDetail = res.data.data;
          this.consultationVisible = true
        } else {
          this.$message.error(res.data.message)
        }
      },
      //获取单位等级列表
      async getUnitGradeList(){
        let params = {
          page: 1,
          limit: 999
        }
        const res = await this.$api.getUnitGradeList(params);
        if (res.data.level == 'success'){
          this.searchLevelList = res.data.data;
        } else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      //获取单位分类
      async getUnitClassifyList(){
        let params = {
          page: 1,
          limit: 999
        }
        const res = await this.$api.getUnitClassifyList(params);
        if (res.data.level == 'success'){
          this.searchSortList = res.data.data;
        } else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      toOfficialComment(id) {
        this.$router.push({name: 'Customer_detail', query: {id: id}})
      },
      toVipCompanyEditor(id) {
        //编辑
        this.$router.push({name: 'VipCompany_editor', query: {id: id}})
      },
      toVipCompanyComment(id) {
        //管理评论
        this.$router.push({name: 'VipCompany_comment', query: {id: id}})
      },
      toStaff(id) {
        //员工列表
        this.$router.push({name: 'VipCompany_staff', query: {id: id}})
      },
      toStaffExamine(id){
        this.$router.push({name: 'vipCompany_staff_examine', query: {id: id}})
      },
      setAdmin(id) {
        //设置管理员
        this.$router.push({name: 'VipCompany_admin', query: {id: id}})
      },
      toReceipt(id){
        //员工列表
        this.$router.push({name: 'VipCompany_receipt', query: {id: id}})
      },
      initData() {

      }

    },
    mounted() {
      this.getUnitList();
      this.getVipPackageList();
      this.getUnitGradeList();
      this.getUnitClassifyList();
      this.tipList();
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .tag-wrapper {
    span {
      padding: 20px
    }
  }
</style>
<style>
  .rich-text img {
    max-width: 100%;
  }
</style>
